import React, { Component, Fragment } from "react";
import { Modal } from "antd-mobile";
import "./index.scss";
import themeUtil from "@tools/theme";
// import IconBack2 from "@images/icon/icon-back-2.png";
import IconBack3 from "@images/icon/icon-back-3.png";
import IconBack4 from "@images/icon/icon-back-4.png";
import IconBack6 from "@images/icon/icon-back-6.png";
import IconBack7 from "@images/icon/icon-back-7.png";
import IconBackXHB from "@images/icon/icon-back-xhb.png";
import IconBackXHD from "@images/icon/icon-back-xhd-index.png";
import IconBackXHDLoan from "@images/icon/icon-back-xhd-loan.png";

const lficonMap = {
	xhfBackIcon30: IconBack4,
	802: IconBackXHD,
	1: IconBack3,
	612: IconBack6,
	xhfBackIcon50: IconBack7,
	xhdLoan: IconBackXHDLoan,
	616: IconBack6
};

/**
 * 公共挽留组件
 */
export default class BackModal extends Component {
	constructor(props) {
		super(props);
	}
	onClick = booleanValue => {
		this.props.onClick(booleanValue);
	};
	componentWillReceiveProps(nextProps) { }
	render() {
		const { isVisible, product, bannerData = {}, isIndex } = this.props;
		const { couponValue } = bannerData;
		return (
			<Modal
				className="back-modal"
				maskClosable={false}
				transparent
				visible={isVisible}
			>
				{/** 如果是小辉宝进入年化数据来源于接口 */}
				{product == "1" && (
					<div className="xhbback">
						<p>再坚持一下</p>
						<span>{`开通银行账户 安全有保障`}</span>
						<img src={IconBackXHB} alt="" />
						<div className="buttons">
							<button className="empty" onClick={() => this.onClick(false)}>
								去意已决
							</button>
							<button className="orange" onClick={() => this.onClick(true)}>
								继续申请
							</button>
						</div>
					</div>
				)}
				{product != "1" && themeUtil.getTheme() == "yhLife" && (
					<div
						className="lfbuttons-wrapper"
						style={{
							height: ["802"].includes(product) ? "2.3rem" : "0",
							paddingBottom: "124%",
							background: `url(${lficonMap[product]})`,
							backgroundSize: "cover"
						}}
					>
						{product == "612" && (
							<div className="content-612">
								完成开通，
								{couponValue && couponValue != "0" ? (
									<Fragment>
										本单
										<span className="font-612">
											立减<i>{couponValue}</i>元
										</span>
									</Fragment>
								) : (
									<Fragment>
										立享
										<span className="font-612 no-coupon">超值权益</span>
									</Fragment>
								)}
							</div>
						)}
						{product === "616" && (
							<div className="content-612">
								完成开通，
								<Fragment>
									立享
									<span className="font-612 no-coupon">超值权益</span>
								</Fragment>
							</div>
						)}
						<div className="buttons">
							{product == "802" ? (
								<Fragment>
									<button className="orange" onClick={() => this.onClick(true)}>
										{isIndex ? "同意协议并继续" : "继续申请"}
									</button>
									<button className="empty" onClick={() => this.onClick(false)}>
										残忍离开
									</button>
								</Fragment>
							) : (
								<Fragment>
									<button className="orange" onClick={() => this.onClick(true)}>
										{product == "612" ? "继续支付" : "继续申请"}
									</button>
									<button className="empty" onClick={() => this.onClick(false)}>
										{product == "612"
											? "放弃支付"
											: product == "xhdLoan"
												? "残忍拒绝"
												: "放弃奖励"}
									</button>
								</Fragment>
							)}
						</div>
					</div>
				)}
			</Modal>
		);
	}
}
